<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>查重报告单</title>
    <script src="js/flexible.js"></script>
    <link href="css/common.css" rel="stylesheet" type="text/css" />
    <link href="css/index.rem.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/json-formatter-js@2.3.4/dist/json-formatter.min.css">
    <style>
        /* 可以添加一些加载状态的样式 */
        .loading-overlay {
            position: fixed;
            /* 如果是针对整个页面，也可以用 absolute 针对容器 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.8);
            /* 半透明遮罩 */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .hidden {
            display: none !important;
        }

        .highlight-content {
            white-space: pre-wrap;
            word-wrap: break-word;
            font-family: monospace;
            padding: 10px;
            background: #f8f8f8;
            border: 1px solid #eee;
            max-height: 500px;
            overflow-y: auto;
        }

        .duplicate.literal {
            background-color: rgba(255, 0, 0, 0.3);
            /* 红色高亮 */
        }

        .duplicate.semantic {
            background-color: rgba(255, 165, 0, 0.3);
            /* 橙色高亮 */
        }
    </style>
</head>

<body>
    <div class="report-page flex-col">
        <!-- 报告标题 -->
        <div class="report-title-container flex-row">
            <span class="report-title">标准查重报告单</span>
        </div>

        <!-- 基本信息卡片 -->
        <div class="card-container">
            <div class="info-card card flex-col">
                <span class="card__title">基本信息</span>
                <div class="info-card__item info-card__item--relative flex-row">
                    <span id="info-task-id" class="info-card__value info-card__value--offset">加载中...</span>
                    <span class="info-card__label info-card__label--absolute">编号：</span>
                </div>
                <div class="info-card__item info-card__item--relative flex-row">
                    <span id="info-check-time" class="info-card__value info-card__value--offset">加载中...</span>
                    <span class="info-card__label info-card__label--absolute">检测时间：</span>
                </div>
                <div class="info-card__item info-card__item--relative flex-row">
                    <span id="info-original-filename" class="info-card__value info-card__value--offset">加载中...</span>
                    <span class="info-card__label info-card__label--absolute">查重标准：</span>
                </div>
                <div class="info-card__item info-card__item--relative flex-row"> <!-- 新增处理耗时 -->
                    <span id="info-processing-time" class="info-card__value info-card__value--offset">加载中...</span>
                    <span class="info-card__label info-card__label--absolute">处理耗时：</span>
                </div>
            </div>
        </div>

        <!-- 摘要卡片 -->
        <div class="card-container">
            <div class="summary-card card flex-col">
                <span class="card__title">查重结果预览</span>
                <div class="summary-card__stats flex-row justify-between">
                    <div class="summary-card__stat-item flex-col justify-between">
                        <span id="summary-overall-ratio" class="summary-card__stat-value">加载中...</span>
                        <span class="summary-card__stat-label">总文字复制比</span>
                    </div>
                    <div class="summary-card__stat-item flex-col justify-between">
                        <span id="summary-max-single-ratio" class="summary-card__stat-value">加载中...</span>
                        <span class="summary-card__stat-label">单篇最大文字复制比</span>
                    </div>
                    <div class="summary-card__stat-item flex-col justify-between"> <!-- 新增重复字数 -->
                        <span id="summary-duplicate-chars" class="summary-card__stat-value">加载中...</span>
                        <span class="summary-card__stat-label">重复字数</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 详细统计卡片 (为每个单元格内容添加id) -->
        <div class="card-container">
            <div class="stats-card card flex-col">
                <span class="card__title">查重详细统计</span>
                <div class="stats-card__rows flex-col">
                    <div class="stats-card__row flex-row justify-between">
                        <div class="stats-card__cell-group flex-row">
                            <div class="stats-card__cell stats-card__cell--label flex-col"><span
                                    class="stats-card__label-text">①总文字复制比</span></div>
                            <span id="stats-overall-ratio" class="stats-card__cell stats-card__cell--content"></span>
                        </div>
                        <div class="stats-card__cell-group flex-row">
                            <div class="stats-card__cell stats-card__cell--label flex-col"><span
                                    class="stats-card__label-text">①总段落数</span></div>
                            <span id="stats-total-paragraphs" class="stats-card__cell stats-card__cell--content"></span>
                        </div>
                    </div>
                    <div class="stats-card__row flex-row justify-between">
                        <div class="stats-card__cell-group flex-row">
                            <div class="stats-card__cell stats-card__cell--label flex-col"><span
                                    class="stats-card__label-text">②单篇最大文字复制比</span></div>
                            <span id="stats-max-single-ratio" class="stats-card__cell stats-card__cell--content"></span>
                        </div>
                        <div class="stats-card__cell-group flex-row">
                            <div class="stats-card__cell stats-card__cell--label flex-col"><span
                                    class="stats-card__label-text">②前部重合字数</span></div>
                            <span id="stats-front-overlap" class="stats-card__cell stats-card__cell--content"></span>
                        </div>
                    </div>
                    <div class="stats-card__row flex-row justify-between">
                        <div class="stats-card__cell-group flex-row">
                            <div class="stats-card__cell stats-card__cell--label flex-col"><span
                                    class="stats-card__label-text">③重复字数</span></div>
                            <span id="stats-duplicate-chars" class="stats-card__cell stats-card__cell--content"></span>
                        </div>
                        <div class="stats-card__cell-group flex-row">
                            <div class="stats-card__cell stats-card__cell--label flex-col"><span
                                    class="stats-card__label-text">③后部重复字数</span></div>
                            <span id="stats-rear-overlap" class="stats-card__cell stats-card__cell--content"></span>
                        </div>
                    </div>
                    <div class="stats-card__row flex-row justify-between">
                        <div class="stats-card__cell-group flex-row">
                            <div class="stats-card__cell stats-card__cell--label flex-col"><span
                                    class="stats-card__label-text">④总字数 (字符)</span></div>
                            <span id="stats-total-chars" class="stats-card__cell stats-card__cell--content"></span>
                        </div>
                        <div class="stats-card__cell-group flex-row">
                            <div class="stats-card__cell stats-card__cell--label flex-col"><span
                                    class="stats-card__label-text">④疑似段落数 (字面)</span></div>
                            <span id="stats-suspected-para-count"
                                class="stats-card__cell stats-card__cell--content"></span>
                        </div>
                    </div>
                    <div class="stats-card__row flex-row justify-between">
                        <div class="stats-card__cell-group flex-row">
                            <div class="stats-card__cell stats-card__cell--label flex-col"><span
                                    class="stats-card__label-text">⑤单篇最大重复字数</span></div>
                            <span id="stats-max-single-chars" class="stats-card__cell stats-card__cell--content"></span>
                        </div>
                        <div class="stats-card__cell-group flex-row">
                            <div class="stats-card__cell stats-card__cell--label flex-col"><span
                                    class="stats-card__label-text">⑤段落最大重复字数</span></div>
                            <span id="stats-max-para-chars" class="stats-card__cell stats-card__cell--content"></span>
                        </div>
                    </div>
                    <div class="stats-card__row flex-row justify-between">
                        <div class="stats-card__cell-group flex-row">
                            <div class="stats-card__cell stats-card__cell--label flex-col"><span
                                    class="stats-card__label-text">⑥语义相似块总数</span></div>
                            <span id="stats-semantic-hit-count"
                                class="stats-card__cell stats-card__cell--content"></span>
                        </div>
                        <div class="stats-card__cell-group flex-row">
                            <div class="stats-card__cell stats-card__cell--label flex-col"><span
                                    class="stats-card__label-text">⑥段落最小重复字数</span></div>
                            <span id="stats-min-para-chars" class="stats-card__cell stats-card__cell--content"></span>
                        </div>
                    </div>
                    <!-- 添加更多统计项的占位符 -->
                    <div class="stats-card__row flex-row justify-between">
                        <div class="stats-card__cell-group flex-row">
                            <div class="stats-card__cell stats-card__cell--label flex-col"><span
                                    class="stats-card__label-text">总词数</span></div>
                            <span id="stats-total-words" class="stats-card__cell stats-card__cell--content"></span>
                        </div>
                        <div class="stats-card__cell-group flex-row">
                            <div class="stats-card__cell stats-card__cell--label flex-col"><span
                                    class="stats-card__label-text">对比文献数</span></div>
                            <span id="stats-compared-docs" class="stats-card__cell stats-card__cell--content"></span>
                        </div>
                    </div>
                    <div class="stats-card__row flex-row justify-between">
                        <div class="stats-card__cell-group flex-row">
                            <div class="stats-card__cell stats-card__cell--label flex-col"><span
                                    class="stats-card__label-text">最大语义得分</span></div>
                            <span id="stats-max-semantic-score"
                                class="stats-card__cell stats-card__cell--content"></span>
                        </div>
                        <div class="stats-card__cell-group flex-row">
                            <div class="stats-card__cell stats-card__cell--label flex-col"><span
                                    class="stats-card__label-text">最高N-gram得分</span></div>
                            <span id="stats-max-ngram-score" class="stats-card__cell stats-card__cell--content"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 来源分析卡片 -->
        <div class="card-container">
            <div class="source-analysis-card card flex-col">
                <span class="card__title">查重来源分析</span>
                <ul id="source-analysis-list" class="source-analysis-card__list">
                    <!-- JavaScript会填充这里 -->
                    <li>加载中...</li>
                </ul>
            </div>
        </div>

        <!-- 结果卡片 (命中详情) -->
        <div class="card-container card-container--results">
            <div id="results-card-container" class="results-card card flex-col"> <!-- 给容器加ID -->
                <span class="card__title">命中结果</span>
                <!-- JavaScript会填充这里 -->
                <p id="results-placeholder" style="text-align: center; color: grey; margin-top: 20px;">加载中...</p>
            </div>
        </div>

        <!--  原文对比高亮卡片 - 字面重复 -->
        <div class="card-container card-container--highlight-literal">
            <div class="highlight-card card flex-col">
                <span class="card__title">原文对比高亮 (字面重复)</span>
                <div id="highlight-content-literal" class="highlight-content">加载中...</div>
            </div>
        </div>

        <!-- 原文对比高亮卡片 - 语义重复 -->
        <div class="card-container card-container--highlight-semantic">
            <div class="highlight-card card flex-col">
                <span class="card__title">原文对比高亮 (语义重复)</span>
                <div id="highlight-content-semantic" class="highlight-content">加载中...</div>
            </div>
        </div>

        <!-- 图例 (保持不变) -->
        <ul class="results-legend flex-row">
            <li class="results-legend__item flex-row align-center">(注释：</li>
            <li class="results-legend__item flex-row align-center">
                <div class="results-legend__marker results-legend__marker--normal"></div>
                <span class="results-legend__text">无问题部分</span>
            </li>
            <li class="results-legend__item flex-row align-center">
                <div class="results-legend__marker results-legend__marker--literal"
                    style="background-color: rgba(255, 0, 0, 0.3);"></div>
                <span class="results-legend__text">文字重复部分</span> <!-- 图例与CSS对应 -->
            </li>
            <li class="results-legend__item flex-row align-center">
                <div class="results-legend__marker results-legend__marker--semantic"
                    style="background-color: rgba(255, 165, 0, 0.3);"></div>
                <span class="results-legend__text">语义重复部分</span> <!-- 图例与CSS对应 -->
            </li>
            <li class="results-legend__item flex-row align-center">)</li>
        </ul>
        <div id="error-message-area" class="card-container hidden"
            style="background-color: #f8d7da; color: #721c24; padding: 15px; border: 1px solid #f5c6cb; border-radius: .25rem;">
            <h3>处理错误：</h3>
            <p id="error-message-content"></p>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/json-formatter-js@2.3.4/dist/json-formatter.cjs.js"></script>
    <script src="js/report.js"></script> <!-- 引入新的 JavaScript 文件 -->
</body>

</html>